<!--
@Author benhailong
@Time 2021/1/14 3:10 下午
-->
<template>
  <div>
    <div class="detailed-banner"></div>
    <div class="ant-flex w-1200">
      <div class="list-left">
        <ListLift :tab.sync="nr_id" ref="lalfey" @antClick="goClass"></ListLift>
      </div>
<!-- 软件下载页面 -->
      <div style="flex:1;border: 0;margin-top: 30px;" v-if="classinfo.type == 5">
        <el-tabs type="border-card">
          <el-tab-pane v-for="(t,index) in threeClass" :key="String(index)" :label="t.name">
           <template>
             <Download :fileRoot="fileRoot" :downClassId="t.id"></Download>
           </template>
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- 单页面 -->
      <div style="flex:1;border: 0;margin-top: 30px;" v-else-if="classinfo.type == 2">
        <h1>{{classinfo.name}}</h1>
        <div class="info-introduction">{{classinfo.introduction}}</div>
        <div style="text-align: left" v-html="classinfo.info"></div>
      </div>
      <!-- 表格下载页面 -->
      <div style="flex:1" class="list-r1" v-else-if="classinfo.type == 6">
        <template v-if="page.total>0">
          <div class="ant-flex ant-flex-between list-title1" style="padding: 10px" v-for="(item,index) in list" :key="String(index)">
            <div style="flex: 1">
              <div style="font-weight: bold;line-height: 30px;font-size: 18px">{{ item.title  | ellipsis(38) }}</div>
              <div style="color: #999999;line-height: 20px;font-size: 14px;">
                发布时间：{{ item.update_time.substring(0,10)}}<br/></div>
            </div>
            <div>
              <div @click="down(item)"
                   style="cursor: pointer;background-color: #377ab7;color: #ffffff;padding: 5px;border-radius: 5px;line-height: 24px;font-size: 12px" >
                点击下载
              </div>
            </div>
          </div>
          <div>
            <el-pagination
                background
                layout="prev, pager, next"
                :page-size="page.pageSize"
                :total="page.total"
                @current-change="currentChange"
                :small="true"
            >
            </el-pagination>
          </div>
        </template>
        <template v-else>
          暂无数据
        </template>
      </div>
      <!-- 外部链接 -->
      <div style="flex:1" class="list-r1" v-else-if="classinfo.type == 8">
        <template v-if="page.total>0">
          <div class="ant-flex ant-flex-between list-title1" style="padding: 10px;cursor: pointer" v-for="(item,index) in list" :key="String(index)" @click="goweb(item.weburl)">
            <div style="flex: 1">
              <div style="font-weight: bold;line-height: 30px;font-size: 18px">{{ item.title  | ellipsis(38) }}</div>
              <div style="color: #999999;line-height: 20px;font-size: 14px;">
                发布时间：{{ item.update_time.substring(0,10)}}<br/> </div>
            </div>
          </div>
          <div>
            <el-pagination
                background
                layout="prev, pager, next"
                :page-size="page.pageSize"
                :total="page.total"
                @current-change="currentChange"
                :small="true"
            >
            </el-pagination>
          </div>
        </template>
        <template v-else>
          暂无数据
        </template>
      </div>
<!--      普通文章-->
      <div style="flex:1" class="list-r" v-else>
        <template v-if="page.total>0">
<!--          <div class="ant-flex ant-flex-between list-title" v-for="(item,index) in list" :key="String(index)" @click="goRead(item)">-->
<!--            <div>* {{ item.title }}</div>-->
<!--            <div>{{ item.time.substring(0,10)}}</div>-->
<!--          </div>-->

          <template v-for="(item,index) in list">
            <div v-if="item.class_type == 4" class="ant-flex ant-flex-between list-title1" style="padding: 10px;cursor: pointer"  :key="String(index)" @click="goweb(item.weburl)">
              <div style="flex: 1">
                <div style="font-weight: bold;line-height: 30px;font-size: 18px">{{ item.title  | ellipsis(38) }}</div>
                <div style="color: #999999;line-height: 20px;font-size: 14px;">
                  发布时间：{{ item.update_time.substring(0,10)}} {{item.class_type}}<br/> </div>
              </div>
            </div>

            <div v-else class="ant-flex ant-flex-between list-title" style="padding: 10px"  :key="String(index)" @click="goRead(item)">
              <div v-if="item.pic">
                <el-image
                    style="width: 200px; height: 120px;margin-right: 10px;border-radius: 5px"
                    :src="fileRoot+item.pic"
                    fit="cover">
                </el-image>
                <!--              <img style="width: 200px;height: auto;margin-right: 10px;border-radius: 5px" :src="fileRoot+item.pic" alt="">-->
              </div>
              <div style="flex: 1">
                <div style="font-weight: bold;line-height: 30px;font-size: 18px">{{ item.title  | ellipsis(38) }}</div>
                <!--              <span style="color: #999999;line-height: 20px;font-size: 14px;">发布时间：{{ item.time.substring(0,10)}}</span>-->
                <div style="color: #999999;line-height: 20px;font-size: 14px;">
<!--                  发布时间：{{ item.update_time.substring(0,10)}} · 阅读数：{{ item.reading}}<br/>-->
                  发布时间：{{ item.update_time.substring(0,10)}}<br/>
                  {{ item.introduction | ellipsis(150) }} </div>
              </div>
            </div>
          </template>
          <div>
            <el-pagination
                background
                layout="prev, pager, next"
                :page-size="page.pageSize"
                :total="page.total"
                @current-change="currentChange"
                :small="true"
            >
            </el-pagination>
          </div>
        </template>
        <template v-else>
          暂无数据
        </template>
      </div>

    </div>
  </div>
</template>

<script>
// import pdf from 'vue-pdf'
import {getListClid,getClassInfoById,getAllByFid} from "@/utils/serve/classify";
import ListLift from "@/components/read/ListLift";
import Download from "@/components/read/Download";
import {getFileUrl} from "@/utils/serve/memory";
export default {
  name: "",
  props: {},
  data() {
    return {
      nr_id: parseInt(this.$route.params.id),
      fileRoot:'',
      classinfo:{},
      threeClass:[],
      zclassid: 0,
      page: {
        pageSize: 15, // 每页显示条数
        total: 0 //总条数
      },
      list:[]
    }
  },
  filters: {
    ellipsis (value, long) {
      if (!value) return ''
      if (value.length > long) {
        return value.slice(0,long) + '...'
      }
      return value
    }
  },
  watch:{
    $route(to, from) {
      //监听相同路由下参数变化的时候，从而实现异步刷新
      // this.loading = true;
      console.log(to,from)
      this.nr_id = this.$route.params.id;
      //重新获取数据
      this.getListClid(1);
      this.getClassInfoById();
    }
  },
  components: {
    // 第三方组件实例化
    ListLift,Download
  },
  mounted: function () {
    this.getFileUrl();
    this.getListClid(1);
    this.getClassInfoById();
  },
  methods: {
    down(e){
      window.open(this.fileRoot + e.pdf.url, '_blank')
    },
    goweb(e){
      window.open(e, '_blank')
    },
    getFileUrl(){
      let _this = this;
      _this.$store.commit("setIsLoading", true);
      getFileUrl(res=>{
        _this.$store.commit("setIsLoading", false);
        if (res.code==0){
          _this.fileRoot = res.data;
        }
      })
    },
    goRead(e){
      this.$router.push({ name: 'ReadReadPdf', params: { id: e.id } });
    },
    getAllByFid(){
      getAllByFid(this.nr_id, res => {
        this.$store.commit("setIsLoading", false);
        console.log(res)
        if(res.code==0){
          this.threeClass = res.data;
          this.zclassid = this.threeClass[0].id
        }
      });
    },
    getClassInfoById(){
      this.$store.commit("setIsLoading", true);
      getClassInfoById(this.nr_id, res => {
        this.$store.commit("setIsLoading", false);
        console.log(res)
        if(res.code==0){
          this.classinfo = res.data;
          if(res.data.type==5){
            this.getAllByFid();
          }
        }
      })
    },
    goClass(e){
      var id = parseInt(e.id)
      this.$router.push({
        name: 'ReadList',
        params: { id: id }
      });
      this.$router.go(0);
    },
    getListClid(page){
      let _this = this;
      _this.$store.commit("setIsLoading", true);
      getListClid(this.nr_id, this.page.pageSize, page,res=>{
        _this.$store.commit("setIsLoading", false);
        console.log(res)
        if(res.code==0){
          _this.list = res.data.list;
          _this.page.total = res.data.total;
        }
      })
    },
    // eslint-disable-next-line no-unused-vars
    currentChange(e) {
      this.getListClid(e);
    }
  }
};
</script>

<style scoped lang="scss">
@import "~@/assets/scss/style.scss";
</style>